<template>
    <div>
        <div>
            <Table row-key="id" :columns="columns" :data="powerkList" border >
                <template slot-scope="{ row, index }" slot="action">
                    <div  style="display: inline;word-wrap:break-word">
                        <div v-for="(item,i) in row.checkAllGroup" :key="item.value" class="ivu-mb-8">
                        <Checkbox
                        :indeterminate="item.indeterminate"
                        :value="item.checkAll"
                        @click.prevent.native="handleCheckAll(row, item)"></Checkbox>
                        </div>
                        <!-- <div >
                            <Checkbox v-model="modalparams.action_ids" v-for="(it,inx) in row.action_list" :key="it.value" :value="it.value" @on-change="checkAllGroupChange(row,it)">{{it.title}}</Checkbox>
                        </div> -->
                        <CheckboxGroup v-model="modalparams.action_ids" v-for="(it,inx) in row.action_list" :key="it.value"  @on-change="checkAllGroupChange(row,it)" >
                            <Checkbox :label="it.value">{{it.title}}</Checkbox>
                        </CheckboxGroup>
                    </div>
                </template>
            </Table>
        </div>
        <div class="demo-drawer-footer">
            <!-- <Button  style="margin-right: 8px" @click="value3 = false">Cancel</Button> -->
            <Button type="primary"  @click='submitedit'>提交</Button>
        </div>
    </div>
</template>
<script>
    import { getRoleInfo, rolePreSet } from '@/api/powersetting.js';
    export default {

        data () {
            return {
                props: {
                    drawer: { type: Boolean,
                              default: false }
                },
                modalparams: { id: 0, action_ids: [], menu_ids: [] },
                powerkList: [],
                changeData: [],
                columns: [
                    {
                        title: '模块标题',
                        key: 'title',
                        width: '200',
                        tree: true
                    },
                    {
                        title: '功能权限',
                        slot: 'action'
                    }
                ],
                childData: []
            }
        },
        watch () {
            // this.powerkList.forEach(data => {
            //     if (data.children) {
            //         data.children.forEach(it => {
            //             it.action_list.forEach(item => {
            //                 this.changeData.push(...item.value)
            //             })
            //         })
            //     }
            // })
        },
        methods: {
            initial (row) {
                this.modalparams = { id: row.id, action_ids: [], menu_ids: [], module_ids: [] };
                this.askData(row)
            },
            askData (row) {
                getRoleInfo({ id: row.id, type: 1 }).then((res) => {
                    this.powerkList = res.auth
                    this.modalparams.action_ids = res.action_ids
                    this.modalparams.menu_ids = res.menu_ids
                    this.modalparams.module_ids = res.module_ids
                })
            },

            // 请求数据处理
            checkAllGroupChange (row, item) {
                // debugger
                // 提取每个模块下子目录下的配置 vlaue
                // 获取返回数据中当前所有动作value集合
                this.powerkList.forEach(list => {
                    if (row.module_id == list.value) {
                        list.children.forEach(it => {
                            it.action_list.forEach(el => {
                                this.changeData.push(el.value)
                                if (item.value == el.value) {
                                    const data = this.changeData.splice(el.value)
                                    if (this.changeData.length == data.length) {
                                        list.checkAllGroup[0].indeterminate = false
                                        list.checkAllGroup[0].checkAll = true
                                    } else if (this.changeData.length > data.length) {
                                        list.checkAllGroup[0].indeterminate = true
                                        list.checkAllGroup[0].checkAll = false
                                    } else {
                                        list.checkAllGroup[0].indeterminate = false
                                        list.checkAllGroup[0].checkAll = false
                                    }
                                }
                            })
                        })
                    }
                })
            },
            // 全选和取消全选
            handleCheckAll (row, item) {
                if (item.value === row.value) {
                    if (row.checkAllGroup[0].indeterminate) {
                        row.checkAllGroup[0].checkAll = false;
                    } else {
                        row.checkAllGroup[0].checkAll = !row.checkAllGroup[0].checkAll;
                    }
                    row.checkAllGroup[0].indeterminate = false;
                    // 全选
                    if (row.checkAllGroup[0].checkAll) {
                        this.modalparams.module_ids.push(item.value)
                        row.children.forEach(it => {
                            this.modalparams.menu_ids.push(it.value)
                            it.action_list.forEach(exp => {
                                exp.checked = true
                                this.modalparams.action_ids.push(exp.value)
                            })
                        })
                    } else {
                        let data = []
                        // 取消全选
                        this.modalparams.module_ids = this.modalparams.menu_ids.splice(item.value)
                        row.children.forEach(it => {
                            this.modalparams.menu_ids = this.modalparams.menu_ids.splice(it.value)
                            it.action_list.forEach(exp => {
                                exp.checked = false
                                data.push(exp.value)

                                // data.push(exp.value)
                            })
                        })
                        this.modalparams.action_ids = this.modalparams.action_ids.filter(expit => !data.includes(expit))
                    }
                }

                // if (row.checkAll) {
                //     item.checkAllGroup = item.checkAllGroup;
                // } else {
                //     item.checkAllGroup = [];
                // }
            },
            // 提交数据
            submitedit () {
                let params = {
                    id: this.modalparams.id,
                    module_ids: this.modalparams.module_ids.join(','),
                    action_ids: this.modalparams.action_ids.join(','),
                    menu_ids: this.modalparams.menu_ids.join(',')
                }
                rolePreSet(params).then(() => {
                    this.$Message.success('授权成功')
                    this.drawer = false
                })
            }
        }
    }
</script>
<style scoped>
.demo-drawer-footer{
    width: 100%;
    position: absolute;
    /* top: 0; */
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 30px;
    text-align: right;
    /* background: #fff; */
    }
/deep/.ivu-checkbox-group{
    display: inline-block;
}
</style>
